<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<html:html lang="true">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title><bean:message key="welcome.title"/></title>
        <html:base/>




    </head>
    <body style="background-color: white">

        <!-- EVENT: onClick, onkeypress, onkeyup, onchange, onblur, onfocus... -->
        <form>
            Nama Buah: <input id="namaBuah" type="text" onkeyup="doUpdate()">

            Rasa buah: <input id="rasaBuah" type="text">

            
        </form>
        <button id="btnShow" onclick="showValue()">Show Me</button>

        <div id="message" style="background-color: #cccccc;height: 150px;width: 300px;"></div>




        <logic:notPresent name="org.apache.struts.action.MESSAGE" scope="application">
            <div  style="color: red">
                ERROR:  Application resources not loaded -- check servlet container
                logs for error messages.
            </div>
        </logic:notPresent>

        <h3><bean:message key="welcome.heading"/></h3>
        <p><bean:message key="welcome.message"/></p>

    </body>

    <script type="text/javascript">
            
            
        function showValue(){
                
            var buah = document.getElementById("namaBuah").value +" "+document.getElementById("rasaBuah").value;
            
            
            alert(buah);
            
            document.getElementById("message").innerHTML = buah;
        }
            
            
        //            var msg = document.getElementById("message");
        //            var userId = document.getElementById("userid");
              
        function doUpdate(){
            var req;
            if(window.XMLHttpRequest){
                req = new XMLHttpRequest();
            }else if(window.ActiveXObject){
                    
                req = new ActiveXObject("Microsoft.XMLHTTP");
                    
            }else{
                alert("Your browser didn't support AJAX");
            }
                
            req.open("GET","http://localhost:8080/",true);
            req.send(null);
            req.onreadystatechange = callback;
                
            function callback(){
                if(req.status == 200){
                    // alert( document.getElementById("userid").value);
                        
                    document.getElementById("message").innerHTML =  document.getElementById("userid").value
                    // $("#userid").val();
                }
            }
                
                
            //alert("This is doUpdate");
        }
            
             
            
            
    </script>
</html:html>
